import { DictTypeVO, getDictTypePage, removeDictType } from '@/services/DictTypeService'
import { ProColumns, ProTable } from '@ant-design/pro-components'
import { Button, Popconfirm, Space, Tag } from 'antd'

export interface DictTypeProps {
  onSave?: () => void
  onUpdate?: (record: DictTypeVO) => void
}

const DictType = (props: DictTypeProps) => {
  /**
   * 列定义
   */
  const columns: ProColumns<DictTypeVO>[] = [
    {
      title: '字典主键',
      dataIndex: 'id',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '字典名称',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '字典类型',
      align: 'center',
      dataIndex: 'type',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Button type="link" href={`/setting/dict/data?dictType=${record.type}`}>
            {record.type}
          </Button>
        )
      },
    },
    {
      title: '状态（0正常 1停用）',
      align: 'center',
      dataIndex: 'status',
      hideInSearch: true,
      render: (_, record) => (record.status ? <Tag color="blue">正常</Tag> : <Tag color="red">停用</Tag>),
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      render: (_: any, record: DictTypeVO) => [
        <Space key="operate">
          <Button type="link" size="small" onClick={() => props.onUpdate && props.onUpdate(record)}>
            编辑
          </Button>

          <Popconfirm
            title="确定要删除吗"
            onConfirm={() => {
              removeDictType(record.id).then()
            }}
            okText="确认"
            cancelText="取消"
          >
            <Button type="link" danger size="small">
              删除
            </Button>
          </Popconfirm>
        </Space>,
      ],
      hideInSearch: true,
    },
  ]

  // 工具栏
  let actions = [
    props?.onSave && (
      <Button key="create" type="primary" onClick={props.onSave}>
        添加
      </Button>
    ),
  ]

  return (
    <>
      <ProTable
        columns={columns}
        request={getDictTypePage}
        toolbar={{
          actions: actions,
        }}
      ></ProTable>
    </>
  )
}

export default DictType
